<template>
  <view>
    <view class="page">
      <view class="group_1">
        <view class="section_7">
          <view class="image-wrapper_1">
            <image src="../../static/icon.png" class="image_5"></image>
          </view>
        </view>
        <view class="section_8">
          <view class="image-text_4">
            <!-- <view class="box_6"></view> -->
            <image src="../../static/SCT.png" class="box_6"></image>
            <text lines="1" class="text-group_1">区块链电子签约平台</text>
          </view>
        </view>
        <view class="section_9">
          <view class="section_2">
            <view class="section_3">
              <view class="image-text_5">
                <image src="../../static/ZH.png" class="label_3"></image>
              </view>
              <!-- input框 -->
              <input class='zh' type="text" placeholder="账号" v-model="phone"/>
            </view>
            <view class="section_4">
              <view class="image-text_6">
                <image src="../../static/MM.png" class="label_4"></image>
              </view>
              <!-- input框 -->
              <input class='zh'  type="password" placeholder="密码" v-model="password"/>
            </view>
            <view class="text-wrapper_1">
              <view lines="1" decode="true" class="text_1">
                
              <text class="text_register" @click="login()">登录</text>
              <view class="yi">|</view>
              <text class="text_password" @click="toRegister()">注册</text>
              </view>
            </view>
          </view>
        </view>
        <view class="section_10">
          <view class="group_2" :class="isAgreement?'or':''" @click="isAgreement=!isAgreement"></view>
          <text lines="1" class="text_2">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {checkMobile,checkPassword,checkCode} from "@/common/util/verify.js"
  export default {
    data() {
      return {
        isAgreement:true,//是否同意协议
        phone:'',//手机
        password:'',//密码
      };
    },
    methods: {
      //去注册
      toRegister(){
        uni.redirectTo({
          url:"/subpkg/login_register/login_register"
        })
      },
     //登录
     async login(){
         //校验手机号
         let verifyResult=await checkMobile(this.phone)
         
         //校验密码
         let passwordResult=await checkPassword(this.password)
         
         if(!this.isAgreement){
           let title='是否同意协议!'
           uni.$showMsg(title)
         }else{
           if(!verifyResult&&!passwordResult){
             let title='账号密码错误!'
             uni.$showMsg(title)
           }else{
             let params={
                   username:this.phone,//手机号
                   password:this.password,//密码
                   platform:2
             }
             this.$store.dispatch('login/login',params)
             try{
               await this.$store.dispatch('login/login',params)
               let title ='登录中~'
               uni.$showMsg(title)
               uni.switchTab({
                 url:'/pages/home/home'
               })
             }catch(e){
               let title = e.message
               uni.$showMsg(title)
             }
           }
         }
     },
     
    }
  }
</script>

<style lang="scss" scoped>
  .or {
    background-color: rgba(205, 173, 102, 1.000000);
  }
  .yi{
    position: absolute;
    left: 275rpx;
    top: 27rpx;
  }
  .text_register{
    margin-right: 75rpx;
  }
  .text_password{
    position: absolute;
    left: 365rpx;
    top: 27rpx;
    
    
  }
  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .group_1 {
    height: 1478rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/%E8%83%8C%E6%99%AF.png?sign=76002dd2ea34284bd676fc4105c78804&t=1659334514) 100% no-repeat;
    background-size: 100% 100%;
    width: 750rpx;
    display: flex;
    flex-direction: column;
  }

  .section_5 {
    width: 690rpx;
    height: 24rpx;
    flex-direction: row;
    display: flex;
    margin: 31rpx 0 0 30rpx;
  }

  .label_1 {
    width: 40rpx;
    height: 24rpx;
  }

  .label_2 {
    width: 38rpx;
    height: 24rpx;
    margin-left: 16rpx;
  }

  .image_1 {
    width: 110rpx;
    height: 24rpx;
    margin-left: 187rpx;
  }

  .image_2 {
    width: 60rpx;
    height: 20rpx;
    margin-left: 181rpx;
  }

  .section_1 {
    width: 43rpx;
    height: 20rpx;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/76750a0d1e1747cbbaee20410140d05a_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    margin-left: 15rpx;
    display: flex;
    flex-direction: column;
  }

  .section_6 {
    width: 689rpx;
    height: 56rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 24rpx 0 0 31rpx;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin-top: 12rpx;
  }

  .box_3 {
    border-radius: 28rpx;
    width: 170rpx;
    height: 56rpx;
    border: 2px solid rgba(255, 255, 255, 1);
    flex-direction: row;
    display: flex;
  }

  .image_4 {
    width: 61rpx;
    height: 33rpx;
    margin: 13rpx 0 0 28rpx;
  }

  .block_1 {
    width: 33rpx;
    height: 33rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/SBJ.png?sign=b9e8c96200226be8f79ee4b39ddb3c62&t=1659339563) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 14rpx 18rpx 0 30rpx;
  }

  .section_7 {
    width: 142rpx;
    height: 142rpx;
    display: flex;
    flex-direction: row;
    margin: 107rpx 0 0 304rpx;
  }

  .image-wrapper_1 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 50%;
    height: 142rpx;
    display: flex;
    flex-direction: column;
    width: 142rpx;
  }

  .image_5 {
    width: 86rpx;
    height: 88rpx;
    margin: 25rpx 0 0 29rpx;
  }

  .section_8 {
    width: 213rpx;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    margin: 29rpx 0 0 276rpx;
  }

  .image-text_4 {
    width: 213rpx;
    height: 88rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box_6 {
    width: 165rpx;
    height: 53rpx;
    background-size: 100% 100%;
    margin-left: 15rpx;
    display: flex;
    flex-direction: column;
  }

  .text-group_1 {
    width: 213rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(240, 228, 199, 1.000000);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin-top: 12rpx;
  }

  .section_9 {
    width: 331rpx;
    height: 481rpx;
    display: flex;
    flex-direction: row;
    margin: 39rpx 0 0 419rpx;
  }

  .section_2 {
    position: relative;
    width: 331rpx;
    height: 481rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/sy.png?sign=e2390892a5933c0b7eb08f1edbab1ad6&t=1659339842) -1rpx -1rpx no-repeat;
    background-size: 552rpx 483rpx;
    display: flex;
    flex-direction: column;
  }

  .section_3 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    position: absolute;
    left: -329rpx;
    top: 107rpx;
    width: 570rpx;
    height: 86rpx;
    display: flex;
    flex-direction: row;
  }

  .image-text_5 {
    width: 99rpx;
    height: 35rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 27rpx 0 0 42rpx;
  }

  .label_3 {
    width: 35rpx;
    height: 35rpx;
  }

  .text-group_2 {
    
    width: 50rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin-top: 0rpx;
  }

  .section_4 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    position: absolute;
    left: -329rpx;
    top: 243rpx;
    width: 570rpx;
    height: 86rpx;
    display: flex;
    flex-direction: row;
  }

  .image-text_6 {
    width: 96rpx;
    height: 38rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 23rpx 0 0 44rpx;
  }

  .label_4 {
    width: 32rpx;
    height: 38rpx;
  }

  .text-group_3 {
    width: 50rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin-top: 6rpx;
  }

  .text-wrapper_1 {
    background-color: rgba(196, 176, 129, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
    position: absolute;
    left: -330rpx;
    top: 388rpx;
  }

  .text_1 {
    width: 307rpx;
    height: 37rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 27rpx 0 0 131rpx;
  }

  .section_10 {
    width: 486rpx;
    height: 19rpx;
    // flex-direction: row;
    display: flex;
    // justify-content: center;
    margin-top: 50rpx;
    margin-left: 15%;
  }

  .group_2 {
    border: 1rpx solid #fff;
    border-radius: 50%;
    width: 18rpx;
    height: 18rpx;
    display: flex;
    flex-direction: column;
  }

  .text_2 {
    width: 465rpx;
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 20rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 25rpx;
  }

  .zh {
    margin-left: -20rpx;
    margin-top: 20rpx;
    width: 550rpx;
  }

  
</style>
